import {TinyPluginFactory} from "../tiny-plugin-factory";
import {Editor} from "tinymce";

export class PanelComponentGrid implements TinyPluginFactory {
  creat = (editor: Editor): void => {
    tinymce.PluginManager.add('panelComponentGrid', function (editor, url) {
      const openDialog = function () {
        // 打开一个窗口
        editor.windowManager.open({
          title: "collection panel component", // 必须有
          body: { // body 必须有
            type: 'panel', // body 的布局方式
            items: [{
              type: 'grid', // body 中的子组件类型
              columns: 2,
              /*
              1. 这是一个纵向的布局
              2. 他的子元素都是 panel component ，与collection不同，他的子元素都是在items 里定义好的，不 是通过initialData 传入的
              */
              items: [
                {
                  type: 'collection', // component type
                  name: 'results', // identifier
                }, {
                  type: 'collection', // component type
                  name: 'results2', // identifier
                },
                {
                  type: 'button', // component type
                  text: 'Alpha',
                  primary: true,
                  name: 'alpha-button-2',
                  disabled: false,
                  borderless: false
                }, {
                  type: 'button', // component type
                  text: 'Alpha',
                  primary: true,
                  name: 'alpha-button',
                  disabled: false,
                  borderless: false
                }
              ],
            }] // array of panel components
          },
          buttons: [
            {
              type: 'submit', // button type
              name: 'submitButton', // identifying name
              text: 'Submit', // text for the button
              // icon: 'checkmark', // will replace the text if configured
              disabled: false, // button is active when the dialog opens
              primary: true, // style the button as a primary button
              align: 'start' // align the button to the left of the dialog footer
            }
          ],
          initialData: {
            results: [{
              text: '第一个',
              value: 'value 1',
              icon: 'bold'
            }, {
              text: '第三个',
              value: 'value 3',
              icon: 'bold'
            }],
            results2: [
              {
                text: '第一个',
                value: 'value 1',
                icon: 'bold'
              }, {
                text: '第二个',
                value: 'value 2',
                icon: 'bold'
              }, {
                text: '第三个',
                value: 'value 3',
                icon: 'bold'
              }
            ]
          },
          onAction: function (dialogApi, actionData) {
            console.log(dialogApi);
            console.log(actionData);
            dialogApi.close();
          }
        })

      };

// 注册一个工具栏按钮名称
      editor.ui.registry.addButton('panelComponentGrid', {
        text: 'panel-component-grid',
        onAction: function (dialogApi, actionData) {
          openDialog();
        }
      });

// 注册一个菜单项名称 menu/menubar
      editor.ui.registry.addMenuItem('panelComponentGrid', {
        text: 'panel-component-grid',
        onAction: function () {
          openDialog();
        }
      });

      return {
        getMetadata: function () {
          return {
            //插件名和链接会显示在“帮助”→“插件”→“已安装的插件”中
            name: "高级自定义选择框",//插件名称
            url: "gitee.com/Z_xw", //作者网址
          };
        }
      };
    });
  };
}
